<form data-abide="ajax" id = 'frmStep1'>
<div class="row">
  <div class="step-wrapper medium-10 medium-centered large-10 large-centered column">
    <div class="stpy large-12 column">

      <div class="step-statement medium-3 large-4 columns">
        <h5>User Registration</h5>
        <p>Hello, let's start creating your professional profile </p>
      </div>  

      <div class="stepbystep medium-9  large-8 columns">
        <div class="right ui ordered  small steps">
          <div class="active step">
            <div class="content">
              <div class="title"></div>
              <div class="description">Basic Information</div>
            </div>
          </div>

          <div class="disabled step">
            <div class="content">
              <div class="title"></div>
              <div class="description">Address</div>
            </div>
          </div>
          <div class="disabled step">
            <div class="content">
              <div class="title"></div>
              <div class="description">Education</div>
            </div>
          </div>
          <div class="disabled step">
            <div class="content">
              <div class="title"></div>
              <div class="description">Work Experience</div>
            </div>
          </div>         
        </div>
      </div>

      <div class="hr-reg large-12 column"><hr></div>

      <div class="large-12 column" style="padding:0;">

        <div class="reg-left-wrap medium-6 large-6 column">
          <div class="reg-left large-12 column"><small>*Required Fields</small></div>
          <div class="reg-left medium-3 large-2 columns"><label>Name*</label></div>
            <div class="reg-left medium-9 large-10 columns">
              <div class=" medium-12 column" style="padding:0;">
                <div class="medium-5 column" style="padding:0;padding-right:.5rem !important;">
                  <input required type="text" name = "fname" placeholder="Firstname" value="<?= $info->fname ?>">
                </div>
                <div class="medium-5 column" style="padding:0;padding-right:.5rem !important;">
                  <input required type="text" name ="lname" placeholder="Lastname" value="<?= $info->lname ?>">     
                </div>
                <div class="medium-2 column" style="padding:0;">
                  <input req type="text" name="mname" placeholder="Middle" value="<?= $info->mname ?>">
                </div>
              </div>      
               <small class="regerr error" style=""><i class="fa fa-exclamation-circle fa-lg" style="color:#E8877D"></i> Fullname is required</small>
              <div class="large-6 columns" style="margin-top:-.5rem;margin-bottom:1rem;padding:0;"><label>(Middle Name is Optional)</label></div>         
            </div>

          <div class="reg-left medium-3 large-2 columns"><label>Gender*</label></div>
            <div class="reg-left medium-9 large-10 columns">
              <input type="radio" name="gender" value ="male" <?= ($info->gender=='male') ? "checked" : "" ?>> Male 
              <input type="radio" name="gender" value ="female"  style="margin-left:1.7rem;" <?= ($info->gender=='female') ? "checked" : "" ?>> Female
              
            </div>

          <div class="reg-left medium-3 large-2 columns"><label>Birthdate*</label></div>
            <div class="reg-left medium-9 large-10 columns">
              <input required type="date" name="bdate" value ="<?= $info->bdate ?>">
              <small class="regerr error" style=""><i class="fa fa-exclamation-circle fa-lg" style="color:#E8877D"></i> Birthdate is required</small>
            </div>

          <div class="reg-left medium-3 large-2 columns"><label>Username*</label></div>
            <div class="reg-left medium-9 large-10 columns">
              <input required name="username" placeholder="For forum use" type="text" value="<?= $info->username ?>">
              <small class="regerr error" style=""><i class="fa fa-exclamation-circle fa-lg" style="color:#E8877D"></i> Username is required</small>
            </div>

          <div class="reg-left radius medium-3 large-2 columns"><label>Password*</label></div>
            <div class="reg-reg medium-4 large-5 columns" style="padding:0 .3rem 0 0;">
              <input id="password" name="password"  type="password" placeholder="Enter Password" required pattern="[a-zA-Z0-9]{8,}">
              <small class="regerr error" style=""><i class="fa fa-exclamation-circle fa-lg" style="color:#E8877D"></i> Password is required and must have atleast 8 characters</small>
            </div>
            <div class="reg-reg medium-4 large-5 columns" style="padding:0 0 0 .3rem">
              <input name="password"  type="password" placeholder="Confirm Password" required data-equalto="password">
              <small class="regerr error" style=""><i class="fa fa-exclamation-circle fa-lg" style="color:#E8877D"></i> Password did not match</small>
            </div>
        </div>

        <div class="reg-right-wrap medium-6 large-6 text-center columns">
          <div class="steve-img large-12 column">
            <img id='profilePic' src="<?= IMAGE_URL_SMALL.$info->profile_pic ?>">
          </div>

          
          <div class="large-12 column" style="margin-top:2rem;">
            <!--<a id='btnUpload' class="button">Upload</a>-->
            <a id="myUpload" class="button" data-reveal-id="changeprimarydp">Upload</a>
          </div>
        </div>

      </div>

      <div class="btn-save text-right medium-4 large-4 columns">
        <a id='btnSave1' type='submit' class="button">Next</a>
      </div>

    </div>
  </div>
</div>
</form>

<style>
body {
  background: #F5F5F5 !important;
}
</style>

<script type="text/javascript"> 
  var prof_pic = "<?= IMAGE_URL_SMALL.$info->profile_pic ?>";
  $('#myUpload').click(function(){
      $('.forum-img').css('background-image', 'url(' + prof_pic + ')'); 
  });
</script>

<script type="text/javascript" src="<?=BASE_URI?>js/step1.js"></script>
